<template>
  <view>
    <nav-bar title="我的收藏"></nav-bar>
    <view class="total-box">
      共<text class="number">{{ total }}</text
      >个
    </view>
    <you-scroll
      :loadingHeight="loadingHeight"
      :mainHeight="scrollHeight"
      :isAllData="isAllData"
      :isRequestSuccess="isRequestSuccess"
      @onRefresh="onRefresh"
      @loadMore="loadMore"
    >
      <template>
        <view v-if="isLoading" class="common-loading">
          <image
            class="loading-img"
            :src="baseIconUrl + '/commonIcon/icon_loading.png'"
          />
          正在加载数据，请稍后......
        </view>
        <view
          class="common-no-data"
          v-else-if="!collectList || collectList.length === 0"
        >
          <image
            class="no-data-img"
            :src="baseIconUrl + '/commonIcon/icon_no_data.png'"
          />
          <view class="text">您还没有训练计划哦~</view>
        </view>
        <view v-else class="collect-list">
          <uni-swipe-action>
            <uni-swipe-action-item
              v-for="(item, index) in collectList"
              :key="index"
              :right-options="options2"
              :show="item.isOpened"
              :auto-close="false"
              @change="changeAction($event, item)"
              @click="clickDelete($event, item)"
            >
              <view
                class="content-box"
                @click="vipClick(item)"
                :style="{
                  borderRadius:
                    openTypeConfig[item.id] === 'right'
                      ? '16rpx 0 0 16rpx'
                      : '16rpx',
                }"
              >
                <view class="left-box">
                  <view
                    class="status-box"
                    :style="{ background: statusConfig[item.isMember].bgColor }"
                  >
                    {{
                      statusConfig[item.isMember].text ||
                      statusConfig["default"].text
                    }}</view>
                   <video
                    :id="'videoId' + index"
                    style="width: 100%; height: 100%"
                    class="video"
                    :src="item.url"
                    @click.stop="clickVideo(item, index)"
                  >
                  </video>
                </view>
                <view class="right-box">
                  <view class="name">{{ item.title }}</view>
                </view>
              </view>
            </uni-swipe-action-item>
          </uni-swipe-action>
          <!-- 消息提示弹框 -->
          <you-popup
            :popupVisible="popupVisible"
            @popupClose="popupVisible = false"
            :popupTitle="dialogTitle"
            @cancel="popupVisible = false"
            @confirm="clickActivate"
          >
            <view slot="popupContent">
              <!-- 标题 -->
              <view class="popup-img">
                <view class="contain-text">
                  <text>是否确认删除该条数据？</text>
                </view>
              </view>
            </view>
          </you-popup>
        </view>
      </template>
    </you-scroll>
  </view>
</template>

<script>
import api_collect from "@/api/user.js";
import { baseIconUrl } from "@/config";
export default {
  name: "MyCollectList",
  data() {
    return {
      baseIconUrl,
      loadingHeight: "",
      scrollHeight: "",
      isAllData: false,
      isRequestSuccess: false,
      isLoading: false,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      collectList: [],
      options2: [
        {
          text: "删除",
          style: { backgroundColor: "#FF513A" },
        },
      ],
      openTypeConfig: {},
      statusConfig: {
        1: { text: "免费", bgColor: "#00C6C5" },
        2: {
          text: "会员专享",
          bgColor: "linear-gradient(146.01deg, #FF4E08 0%, #FF974D 100%)",
        },
        default: { text: "--", bgColor: "" },
      },
      popupVisible: false,//删除弹框
      dialogTitle:'',
      collectId:null
    };
  },

  onLoad() {
    this.scrollHeight =
      this.$store.getters.heightData.noTabMainHeight - 44 + "px";
    this.loadingHeight =
      this.$store.getters.heightData.noTabMainHeight - 64 + "px";
    this.getCollectList();
  },

  methods: {
    getCollectList() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      api_collect.collectList(params).then((res) => {
       const result = res.rows
        result.forEach(item => {
          item.coverUrl = item.coverUrl ? item.coverUrl.includes('http') ? item.coverUrl : this.baseUrl + item.coverUrl : ''
        })
        this.collectList.push(...res.rows);
        this.total = res.total;
        this.isRequestSuccess = true;
        this.isLoading = false;
      });
    },
    changeAction($event, item) {
      this.openTypeConfig = {
        ...this.openTypeConfig,
        [item.id]: $event,
      };
      item.openType = $event;
    },
    clickDelete($event, item) {
      this.popupVisible = true
      this.dialogTitle = '删除提示'
      this.collectId = item.id
    },
    //删除确认提示
    clickActivate(){
      const params = {
        ids: this.collectId,
      };
      api_collect.deleteCollect(params).then((res) => {
        if (res.code !== 200) return
        this.popupVisible = false
        this.pageNum = 1;
        this.collectList = [];
        this.getCollectList()
      });
    },
    //查看详情
    vipClick(item){
      uni.navigateTo({
            url: `/subPages/userIndex/videoLibrary/videoDetail?title=${item.title}&id=${item.videoId}`,
      })
    },
    // 下拉刷新
    onRefresh() {
      this.pageNum = 1;
      this.collectList = [];
      this.isAllData = false;
      this.isRequestSuccess = false;
      this.getCollectList();
    },
    // 上拉加载
    loadMore() {
      if (this.collectList.length < this.total) {
        this.pageNum++;
        this.isAllData = false;
        this.isRequestSuccess = false;
        this.getCollectList();
      } else {
        this.isAllData = true;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.total-box {
  height: 44px;
  padding: 0 30rpx;
  line-height: 44px;
  font-size: 28rpx;
  color: #666;
  .number {
    margin: 0 4rpx;
    color: #115baa;
  }
}
.content-box {
  display: flex;
  padding: 24rpx 30rpx;
  // border-radius: 16rpx;
  background-color: #fff;
  .left-box {
    position: relative;
    width: 288rpx;
    height: 192rpx;
    margin-right: 20rpx;
    border-radius: 16rpx;
    // background-color: #ffbdbd;
    overflow: hidden;
    .status-box {
      position: absolute;
      left: 0;
      top: 0;
      height: 40rpx;
      padding: 0 14rpx;
      border-radius: 16rpx 0 16rpx 0;
      line-height: 40rpx;
      font-size: 20rpx;
      color: #fff;
    }
    .member-box {
      background: linear-gradient(146.01deg, #ff4e08 0%, #ff974d 100%);
    }
  }
  .right-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16rpx 0;
    .name {
      font-size: 32rpx;
      font-weight: 500;
    }
    .time {
      font-size: 24rpx;
      color: #999;
    }
  }
}
.contain-text{
  text-align: center;
  padding: 30rpx;
}
</style>
